<template>
  <div class='container'>
<el-dialog  :visible="showDialog"  title="题目预览" @close='clickDialog()'>
 <el-row >
<el-col :span="6"><div class="grid-content bg-purple">【题型】{{list.questionType|tx}}</div></el-col>
   <el-col :span="6"><div class="grid-content bg-purple">【编号】{{list.id}} </div></el-col>
   <el-col :span="6"><div class="grid-content bg-purple">【难度】{{list.difficulty|nd}} </div></el-col>
   <el-col :span="6"><div class="grid-content bg-purple">【标签】{{list.tags}} </div></el-col>
   <el-col :span="6"><div class="grid-content bg-purple">【学科】{{list.subjectName}} </div></el-col>
   <el-col :span="6"><div class="grid-content bg-purple">【目录】{{list.directoryName}} </div></el-col>
   <el-col :span="6"><div class="grid-content bg-purple">【方向】{{list.direction}} </div></el-col>
 </el-row>
<hr>

    <div>
     【题干】
       <div>{{list.questionType|tx}}</div>
     <div v-html="list.question" style="color:blue"></div>
      <div v-if="list.questionType!=='3'">
        <div> 选项：（以下选中的选项为正确答案）</div>
        <div v-for="item in list.options" :key="item.code">
          <el-radio v-if="list.questionType==='1'" :value="item.isRight" :label="1">{{item.title}}</el-radio>
          <el-checkbox v-if="list.questionType==='2'" :value="item.isRight?true:false" >{{item.title}}</el-checkbox>
        </div>
      </div>
    </div>
    <hr>
  <div>【参考答案】<el-button type="danger" size="mini" @click="show">答案解析视频</el-button> </div>
  <div class="video" v-show="videoShow">
        <video ref="video" :src="list.videoURL" v-show="videoShow" controls></video>
      </div>
    <hr>
  <div>【答案解析】
    <div v-html="list.answer"></div>
  </div>
  <hr>
  <div>【题目备注】
    <div>{{list.remarks}} </div>
  </div>
  <template #footer>
            <el-button type="primary" @click="clickDialog">关闭</el-button>
  </template>
</el-dialog>
  </div>

</template>

<script>
import { difficulty, questionType } from '@/api/hmmm/constants'
import { detail } from '@/api/hmmm/questions.js'
export default {
  name: 'Container',
  props: {
    data: {
      type: Object,
      default: () => {}

    }
  },
  data () {
    return {
      showDialog: false,
      list: [],
      videoShow: false,
      Url: 'http://v.itheima.com/zycbrm2.mp4'
    }
  },
  filters: {
    nd (value) {
      if (value) return difficulty.find(item => item.value === +value).label
    },
    tx (value) {
      if (value) return questionType.find(item => item.value === +value).label + '题'
    }
  },
  methods: {
    async open () {
      this.showDialog = true
      const { data } = await detail({ id: this.data.id })
      console.log(data)
      this.list = data
    },
    show () {
      this.videoShow = true
      this.$nextTick(() => {
        this.$refs.video.play()
      })
    },
    clickDialog () {
      this.showDialog = false
      this.videoShow = false
    }
  }
}
</script>

<style scoped lang='less'></style>
